<template>
	<view>
		<view class="content" v-if="jiaoyan === 0">
			<!-- 表单内容 -->
			<view class="form-item">
				<text class="label">姓名</text>
				<input class="input" placeholder="请填写姓名" required v-model="name" />
			</view>
			<view class="form-item">
				<text class="label">性别</text>
				<radio-group @change="radioChange" style="display: flex;flex-wrap: wrap;line-height:25px">
					<label style="display: flex;flex-wrap: wrap;margin-right:20px;">
						<view>
							<radio style="transform:scale(0.7)" :value="0" :checked="0 === current" />
						</view>
						<view>未知</view>
					</label>
					<label style="display: flex;flex-wrap: wrap;margin-right:20px;">
						<view>
							<radio style="transform:scale(0.7)" :value="1" :checked="1 === current" />
						</view>
						<view>男</view>
					</label>
					<label style="display: flex;flex-wrap: wrap;">
						<view>
							<radio style="transform:scale(0.7)" :value="2" :checked="2 === current" />
						</view>
						<view>女</view>
					</label>
				</radio-group>
			</view>
			<view class="form-item">
				<text class="label">身份证号</text>
				<input class="input" placeholder="请填写身份证号码" required v-model="idcard" />
			</view>
			<view class="form-item">
				<text class="label">手机号码</text>
				<input class="input" placeholder="请填写手机号码" required v-model="phone" />
			</view>
			<view class="form-item">
				<text class="label">自我描述</text>
				<input class="input" placeholder="请简要描述" required v-model="desc" />
			</view>
		</view>
		<view style="width:92%;padding-top:15px;margin:0 auto;" v-if="jiaoyan === 0">
			<button class="btn" style="" @tap="toSubmit">提交</button>
		</view>
		<view class="content" v-if="jiaoyan !== 0">
			<view class="form-item">
				<text class="label">姓名</text>
				<text>{{xinxiList.name}}</text>
			</view>
			<view class="form-item">
				<text class="label">性别</text>
				<text v-if="xinxiList.sex ===0">未知</text>
				<text v-if="xinxiList.sex ===1">男</text>
				<text v-if="xinxiList.sex ===2">女</text>
			</view>
			<view class="form-item">
				<text class="label">身份证号</text>
				<text>{{xinxiList.id_no}}</text>
			</view>
			<view class="form-item">
				<text class="label">手机号</text>
				<text>{{xinxiList.mobile}}</text>
			</view>
			<view class="form-item">
				<text class="label">自我描述</text>
				<text>{{xinxiList.desc}}</text>
			</view>
			<view class="form-item">
				<text class="label">创建时间</text>
				<text>{{xinxiList.create_time}}</text>
			</view>

		</view>
	</view>
</template>

<script setup lang="ts">
	import { onShow, onLoad } from '@dcloudio/uni-app'
	import { pageUrl } from '@/utils/constants'
	import { ref, watch } from 'vue'
	import { userPlayAddApi, playDetailApi } from '@/api/peiwan'

	const name = ref();
	const idcard = ref();
	const phone = ref();
	const desc = ref();
	const sex = ref();
	const current = ref(0)
	const toSubmit = () => {
		userPlayAddApi(name.value, idcard.value, phone.value,sex.value,desc.value).then((res:any) => {
			uni.showToast({
				title: res.msg,
				icon: 'none'
			})
			uni.switchTab({
				url:pageUrl['my']
			})
			//console.log('999999',res)
		})
	}
	const radioChange =(e:any)=>{
		sex.value = e.detail.value
		console.log('sex',sex.value)
	}
	//身份证规范验证，有需求时自行使用
	const validateIDCard = (idCard : number) => {
		const idCardReg = /^[1-9]\d{5}(18|19|20|21|22)?\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}(\d|[Xx])$/;
		return idCardReg.test(idCard);
	}
	
	const jiaoyan = ref()
	const xinxiList = ref([])
	onLoad(() => {
		playDetailApi().then((res:any) => {
			console.log('88888', res.result)
			xinxiList.value = res.result
			jiaoyan.value = res.result.length

		})
	})
</script>
<style lang="scss">
	page {
		background-color: #f4f4f4;
	}

	.content {
		margin: 20rpx 20rpx 0;
		padding: 0 20rpx;
		border-radius: 10rpx;
		background-color: #fff;

		.form-item,
		.uni-forms-item {
			display: flex;
			align-items: center;
			min-height: 96rpx;
			padding: 25rpx 10rpx 40rpx;
			background-color: #fff;
			font-size: 28rpx;
			border-bottom: 1rpx solid #ddd;
			position: relative;
			margin-bottom: 0;
			font-size: 24rpx;

			// 调整 uni-forms 样式
			.uni-forms-item__content {
				display: flex;
				align-items: center;
			}

			.uni-forms-item__error {
				margin-left: 160rpx;
			}

			&:last-child {
				border: none;
			}

			.label {
				width: 160rpx;
				font-size: 28rpx;
				color: #333;
			}

			.input {
				flex: 1;
				display: block;
				height: 46rpx;
			}

			.switch {
				position: absolute;
				right: 0rpx;
				transform: scale(0.8);
			}

			.placeholder {
				color: #808080;
				font-size: 28rpx;
			}

			.uni-input-placeholder {
				font-size: 28rpx;
				color: #808080;
			}
		}
	}

	.btn {
		background-color: #f00;
		margin: 10px auto;
		width: 100%;
		color: #ffffff;
		font-size: 14px;
		height: 30px;
		line-height: 30px;
		border-radius: 20px;
	}
</style>